var context = document.getElementById('canvas').getContext('2d');
/**
 * 使用arcTo()方法绘制圆角
 * @param cornerX
 * @param cornerY
 * @param width
 * @param height
 * @param cornerRadius
 */
function roundedRect(cornerX, cornerY, width, height, cornerRadius) {
    //这两行代码的意思就是移动到绘制点开始的位置 开始绘制图形
    if (width > 0) {
        context.moveTo(cornerX + cornerRadius, cornerY);
    } else {
        context.moveTo(cornerX - cornerRadius, cornerY);
    }
    /**
     * 针对下面的方法 先全部注销 然后每次启用一个arcTo()方法 看看结果 自己想想哈
     */
    context.arcTo(cornerX + width, cornerY,
        cornerX + width, cornerY + height,
        cornerRadius);

    context.arcTo(cornerX + width, cornerY + height,
        cornerX, cornerY + height,
        cornerRadius);

    context.arcTo(cornerX, cornerY + height,
        cornerX, cornerY,
        cornerRadius);

    if (width > 0) {
        context.arcTo(cornerX, cornerY,
            cornerX + cornerRadius, cornerY,
            cornerRadius);
    } else {
        context.arcTo(cornerX, cornerY,
            cornerX - cornerRadius, cornerY,
            cornerRadius);
    }
}
/**
 * 绘制圆角矩形
 * @param strokeStyle 边的颜色
 * @param fillStyle 填充的颜色
 * @param cornerX
 * @param cornerY
 * @param width
 * @param height
 * @param cornerRadius
 */
function drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY, width, height, cornerRadius) {
    context.beginPath();

    roundedRect(cornerX, cornerY, width, height, cornerRadius);

    context.strokeStyle = strokeStyle;
    context.fillStyle = fillStyle;

    context.stroke();
    context.fill();
}

drawRoundedRect('blue', 'yellow', 50, 40, 100, 100, 10);
drawRoundedRect('purple', 'green', 275, 40, -100, 100, 20);
drawRoundedRect('red', 'white', 300, 140, 100, -100, 30);
drawRoundedRect('white', 'blue', 525, 140, -100, -100, 40);
